<template>
	<view class="">
		<view class="loading_css" v-if="isShow">
			<u-loading size="36" color="#FC5B03"></u-loading>
			<view>加载中</view>
		</view>
		<template v-else>

			<view class="swiper_info">
				<u-swiper :list="list" height="540" mode="none" border-radius="0"></u-swiper>
			</view>
			<view class="content_bg" style="transform: translateY(-20rpx);">
				<view class="coupon_title">
					<view class="coupon_title_le">
						<view class="coupon_price flex align-center">
							<text class="coupon_price_1">￥</text>
							<text class="coupon_price_2">{{goods_info.price}}</text>
							<text class="coupon_price_3">￥{{goods_info.oprice}}</text>
							<text class="coupon_price_4">已售{{goods_info.sold_num}}</text>
						</view>
						<view class="coupon_tip flex align-center justify-between">
							<image class="coupon_tip_1" :src='STATIC_URL+"305.png"'></image>
							<view class="coupon_tip_2 flex align-center justify-center">
								<text v-if="goods_info.label_type == 1">直降优惠</text>
								<text v-if="goods_info.label_type == 2">专享价</text>
								<text v-if="goods_info.label_type == 3">预售优惠</text>
								<text v-if="goods_info.label_type == 4">商家新客</text>
							</view>
							<view class="coupon_tip_3">共省￥{{goods_info.oprice-goods_info.price}}</view>
						</view>
					</view>
					<view class="coupon_title_ri">
						<image :src='STATIC_URL+"350.png"' v-if="goods_info.label_type == 1"></image>
						<image :src='STATIC_URL+"351.png"' v-if="goods_info.label_type == 2"></image>
						<image :src='STATIC_URL+"352.png"' v-if="goods_info.label_type == 3"></image>
						<image :src='STATIC_URL+"353.png"' v-if="goods_info.label_type == 4"></image>
					</view>
				</view>
				<view class="coupon_name">{{goods_info.name}}</view>
				<view class="coupon_label" v-if="goods_info.label_ts">
					<view class="label_item" v-for="(v, k) in goods_info.label_ts">{{v}}</view>
				</view>
				<view class="tips_item flex align-center">
					<view class="tips_item_1">服务</view>
					<view class="tips_item_2">随时退·过期退</view>
				</view>
				<view class="tips_item flex align-center" @tap.stop="seeMore(3)" v-if="goods_info.weekend_set">
					<view class="tips_item_1">须知</view>
					<view class="tips_item_2">{{goods_info.weekend_set}}可用</view>
					<u-icon name="arrow-right" size="24" color="#000"></u-icon>
				</view>
				<view class="tips_item flex align-center" @tap.stop="seeMore(3)" v-if="goods_info.reservation_hour > 0">
					<view class="tips_item_1">方式</view>
					<view class="tips_item_2">至少提前{{goods_info.reservation_hour}}小时预约</view>
					<u-icon name="arrow-right" size="24" color="#000"></u-icon>
				</view>
				<view class="coupon_date flex align-center">
					<image :src='STATIC_URL+"306.png"'></image>
					<text>可用有效期：{{goods_info.create_at}} 至 {{goods_info.end_at}}</text>
				</view>
			</view>
			<view class="content_bg">
				<view class="content_title">适用车型</view>
				<scroll-view class="city_list" scroll-x="true">
					<view class="city_item flex align-center justify-center" v-for="(v, k) in city_list" :class="city_id == v.city_id ? 'city_item_active' : ''" @tap.stop="selectCity(v.city_id, k)">
						<image v-if="city_id == v.city_id" :src='STATIC_URL+"307.png"'></image>
						<text>{{v.name}}市</text>
					</view>
				</scroll-view>
				<view class="ri_item" v-for="(item, index) in car_list" :key="index" @tap.stop="seeMore(1)">
					<view class="vehicle_information">
						<view class="car_img">
							<u-lazy-load height="196" border-radius="16" class="car_img"
								:image="item.image"></u-lazy-load>
							<image v-if="item.type == 2" class="car_icon" :src='STATIC_URL+"220.png"'
								></image>
						</view>
						<view class="car_name">
							<view class="car_name_1">{{item.name}}</view>
							<view class="car_name_2">
								<text>{{item.seats}}座</text>
								<text class="car_name_2_1">丨</text>
								<text>{{item.gearbox}}</text>
								<text class="car_name_2_1">丨</text>
								<text>{{item.power}}</text>
								<text class="car_name_2_1">丨</text>
								<text>{{item.model}}</text>
							</view>
							<view class="vehicle_label">
								<view class="label_le">
									<template v-if="item.tags">
										<template v-for="(v, k) in (item.tags).split(',')">
											<!-- #ifdef MP-ALIPAY -->
											<view v-if="v == 1" class="flex align-center justify-center label_3">
												<image :src='STATIC_URL+"9.png"'></image>
												<text>芝麻免押</text>
											</view>
											<!-- #endif -->
											<!-- #ifndef MP-ALIPAY -->
											<image v-if="v == 1" class="label_1" :src='STATIC_URL+"219.png"'
												mode="aspectFill"></image>
											<!-- #endif -->
											<view class="label_2" v-if="v != 1">{{getTag(v)}}</view>
										</template>
									</template>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="car_more flex align-center justify-between" @tap.stop="seeMore(1)">
					<view class="">查看更多车型</view>
					<u-icon name="arrow-right" size="24"></u-icon>
				</view>
			</view>
			<view class="content_bg" style="margin-top: 20rpx;">
				<view class="content_title">可用门店</view>
				<view class="store_info flex justify-between">
					<view class="store_info_le" @tap.stop="seeMore(2)">
						<view class="store_info_title flex align-center">
							<image :src='STATIC_URL+"309.png"'></image>
							<text>{{storeInfo.name}}</text>
						</view>
						<view class="store_info_address">
							地址：{{storeInfo.address}}
						</view>
						<view class="store_info_address" style="margin-top: 8rpx;">
							营业时间：08:00-21:00
						</view>
						<view class="store_more flex align-center justify-between" @tap.stop="seeMore(2)">
							<view class="">查看更多门店</view>
							<u-icon name="arrow-right" size="22" style="transform: translateY(2rpx);"></u-icon>
						</view>
					</view>
					<view class="store_info_ri flex">
						<view class="store_ri_item" @tap.stop="openLocation">
							<image :src='STATIC_URL+"310.png"'></image>
							<view>导航</view>
						</view>
						<view class="store_ri_item" @tap.stop="getgiveMobile">
							<image :src='STATIC_URL+"311.png"'></image>
							<view>电话</view>
						</view>
					</view>
				</view>
			</view>
			<view class="content_bg" style="margin-top: 20rpx;">
				<view class="content_title">购买须知</view>
				<view class="describe">
					<u-parse :html="goods_info.intro"></u-parse>
				</view>
			</view>
			
			<view class="content_bg" style="margin-top: 20rpx;">
				<view class="content_title">下单流程</view>
				<view class="describe">
					<u-parse :html="goods_info.order_process"></u-parse>
				</view>
			</view>
			
			<view class="money_footer" style="justify-content: space-between;" v-if="order_info.status == 0">
				<view class="footer_le flex align-center justify-between">
					<view class="footer_le_1">
						<text>￥</text>
						<text class="footer_le_1_1">{{order_info.num*order_info.price}}</text>
						<!-- <text class="footer_le_1_2">
							<text class="footer_le_1_3">￥</text>
							<text>{{goods_info.oprice}}</text>
						</text> -->
					</view>
					<!-- <view class="box_info">
						<u-number-box bg-color="#FC5B03" color="#fff"  v-model="num" size="22" :min="1" :max="20" @change="valChange"></u-number-box>
					</view> -->
				</view>
				<view class="footer_ri">
					<view class="footer_ri_1" @tap.stop="handleJumpDiy" data-type="navigateTo"
						:data-url="`/pages/my/customer/customer`">
						<image :src='STATIC_URL+"312.png"'></image>
						<view class="">客服</view>
					</view>
					<view class="footer_ri_2" @tap.stop="buyCoupon">继续支付</view>
				</view>
			</view>
			<view class="money_footer" v-if="order_info.status == 1 && order_info.left_num > 0">
				<view class="footer_ri_1" @tap.stop="handleJumpDiy" data-type="navigateTo"
					:data-url="`/pages/my/customer/customer`">
					<image :src='STATIC_URL+"312.png"'></image>
					<view class="">客服</view>
				</view>
				<!-- #ifdef MP-TOUTIAO -->
				<view class="footer_ri">
					<view class="footer_ri_2" @tap.stop="clickRefund">退款</view>
				</view>
				<!-- #endif -->
				
				<view class="footer_ri">
					<view class="footer_ri_2" @tap.stop="predetermine">预定车辆</view>
				</view>
			</view> 
			
			<!-- <view class="customer_view" @tap.stop="handleJumpDiy" data-type="navigateTo" :data-url="`/pages/my/customer/customer`">
				<view class="flex align-center">
					<image :src='STATIC_URL+"289.png"'></image>
					<view class="customer_btn_text">人工客服</view>
				</view>
				<view class="customer_btn_text">08:00 - 21:00</view>
			</view> -->
			<view style="height: 140rpx;"></view>
		</template>

		<!-- <u-modal v-model="refundShow" content="确认退款吗？" :show-cancel-button="true" confirm-color="#FC5B03"
			@confirm="confirmCancel"></u-modal> -->
			
			
		<u-popup v-model="refundShow" mode="bottom" border-radius="28">
			<view class="account_pop">
				<view class="account_title">
					退款
				</view>
				<scroll-view class="account_list" :scroll-y="true">
					<view class="account_item" v-for="(item, index) in refoundList" :key="index"
						@tap.stop="selectRefound(item.name)">
						<view class="account_item_text flex align-center">
							<text>{{item.name}}</text>
						</view>
						<image v-if="refound_name == item.name" class="account_item_icon"
							:src='STATIC_URL+"7.png"'></image>
						<image v-else class="account_item_icon" :src='STATIC_URL+"8.png"'></image>
					</view>
				</scroll-view>
				<view class="refound_view flex align-center justify-between">
					<view class="">退款数量：</view>
					<u-number-box bg-color="#FC5B03" color="#fff"  v-model="refound_num" size="22" :min="1" :max="order_info.left_num" ></u-number-box>
				</view>
				
				<view class="account_btn">
					<view class="account_btn_1" @tap.stop="closeRefound">取消</view>
					<view class="account_btn_2" @tap.stop="confirmRefound">确定</view>
				</view>
			</view>
		</u-popup>
		
		<u-modal v-model="sequenceShow" content="距离超值优惠就差一步,确定要退款吗？" :show-cancel-button="true"
			confirm-color="#FC5B03" @confirm="cardRefund"></u-modal>
		
	</view>
</template>

<script>
	import utils from "@/common/utils/utils.js"
	export default {
		data() {
			return {
				isShow: true,
				refundShow: false,
				order_info: {}, // 团购订单信息
				goods_info: {}, // 团购商品信息
				refound_num: 1,
				totalPrice: 0,
				id: "42355475181867008", // 团购商品id
				
				list: [],
				login_show: false,
				is_tick: false,
				code: "",
				city_list: [], // 城市列表
				store_list: [],  // 门店列表
				tags: [],
				city_id: "",
				cityIndex: 0,
				storeInfo: {},  // 门店信息
				car_list: [],
				navigateToType: "",  // 跳转类型
				timeData: {
					dayNum: 1
				},

				pollIntervalId: null,
				selectRefoundInfo: {},
				refoundList: [
					{
						id: 1,
						name: '买多了/买错了'
					},
					{
						id: 2,
						name: '计划有变，暂时不需要了'
					},
					{
						id: 3,
						name: '使用规则不合理'
					},
					{
						id: 4,
						name: '距离太远'
					},
					{
						id: 5,
						name: '朋友/网上评价不好'
					}
				],
				refound_name: "买多了/买错了",
				is_submit: false,
				outRefundNo: "",
				sequenceShow: false,  // 次卡
			}
		},
		onLoad(options) {
			let {
				id
			} = options;
			if (id !== undefined) this.id = id;
			this.getDetails();
			this.initCode();
			this.tags = uni.getStorageSync('tag');
		},
		onShow() {

		},
		onUnload() {
			this.stopPolling();
		},
		methods: {
			// 获取团购订单详情  userCouponDetails
			getDetails() {
				this.$api.post(global.apiUrls.userCouponDetails, {
					id: this.id
				}).then(res => {
					// console.log(res);
					this.isShow = false;
					if (res.data.code == 1) {
						this.order_info = res.data.data;
						this.goods_info = res.data.data.goods_info;
						this.totalPrice = res.data.data.price * this.num;
						this.city_list = res.data.data.goods_info.city_list;
						if (this.city_list.length > 0) {
							if (uni.getStorageSync('city')) {
								let cityInfo = uni.getStorageSync('city');
								let index = this.city_list.findIndex(e => e.city_id == cityInfo.citycode);
								if (index == -1) {
									index = this.city_list.findIndex(e => e.city_id == '0371');
								}
								let item = this.city_list.splice(index, 1)[0];
								this.city_list.unshift(item);
								this.city_id = this.city_list[0].city_id;
								this.cityIndex = 0;
							
							} else {
								let index = this.city_list.findIndex(e => e.city_id == '0371');
								let item = this.city_list.splice(index, 1)[0];
								this.city_list.unshift(item);
								this.city_id = this.city_list[0].city_id;
								this.cityIndex = 0;
							}
						}
						this.store_list = res.data.data.goods_info.store_list;
						if (res.data.data.goods_info.label_img) {
							this.list = res.data.data.goods_info.label_img.split(',');
						}
						this.getCityData();
						if (this.goods_info.create_at) {
							this.goods_info.create_at = this.goods_info.create_at.substring(0, 11);
						}
						if (this.goods_info.end_at) {
							this.goods_info.end_at = this.goods_info.end_at.substring(0, 11);
						}
						let count = 1;
						if (this.order_info.coupons_type == 15) {
							count = this.order_info.card_count;
						}
						this.getOneTime(count);
					} else {
						this.$message.info(res.data.info);
					}
				})
			},
			getTag(id) {
				let item = this.tags.find((item) => item.id == id);
				return item.name;
			},
			selectCity(id, index) {
				this.city_id = id;
				this.cityIndex = index;
				uni.showLoading({
					title: '加载中'
				})
				setTimeout(() => {
					uni.hideLoading();
				}, 300)
				this.getCityData();
			},
			// 获取城市对应的门店和车型
			getCityData() {
				if (this.store_list.length > 0) {
					this.store_list.forEach((v, k) => {
						if (this.city_id == '0371') {
							if (v.id == 1) {
								this.storeInfo = v;
							}
						} else {
							if (this.city_id == v.city_id) {
								this.storeInfo = v;
							}
						}
						
					})
				}
				this.car_list = this.city_list[this.cityIndex].car_list;
			},
			// 购买团购券
			buyCoupon() {
				let _this = this;
				if (_this.is_submit) return;
				_this.is_submit = true;
				uni.showLoading({
					title: '支付中'
				})
				setTimeout(() => {
					uni.hideLoading();
				}, 800)
				tt.continueToPay({
					outOrderNo: _this.id, // 外部订单号 2个订单号必填一个
					success: (res) => {
						const {
							orderId,
							outOrderNo
						} = res;
						console.log("success res", res);
						console.log("orderId", orderId, "outOrderNo", outOrderNo);
						_this.is_submit = false;
						_this.isShow = true;
						_this.getDetails();
					},
					fail: (res) => {
						const {
							orderId,
							outOrderNo,
							errNo,
							errMsg,
							errLogId
						} = res;
						if (errLogId) {
							console.log("查询订单信息失败", errNo, errMsg, errLogId);
						}
						if (orderId || outOrderNo) {
							console.log("支付失败", errNo, errMsg, orderId, outOrderNo);
						}
						_this.$message.info('支付已取消');
						_this.is_submit = false;
					},
				});
			},
			handleRefund(event) {
				const {
					status,
					result
				} = event.detail;
				if (status === 'success') {
					this.isShow = true;
					this.startPolling();
				}
			},
			onError(event) {
				this.$message.info(event.detail.errMsg);
			},
			applyRefund(event) {
				const {
					orderId
				} = event.detail;
				const itemOrderList = [{
					itemOrderId: 'ots74032542074925898654163',
					refundAmount: 1899
				}]
				// let itemOrderList = [];
				// this.detailsInfo.dy_payments.forEach((v, k) => {
				// 	itemOrderList.push({
				// 		itemOrderId: v.payment_trade,
				// 		// refundAmount: 1899,
				// 		refundAmount: this.formatNumber(v.order_amount*(Number(this.refund_percentage)/100)) * 100
				// 	})
				// })
				const extra = {
					orderId,
					itemOrderList
				};
				return new Promise(resolve => {
					resolve(extra); // extra 透传至服务端时，当中的 itemOrderList 会被删除
					console.log(extra);
				});
			},

			formatNumber(num) {
				let strNum = String(num);
				let decimalIndex = strNum.indexOf('.');

				if (decimalIndex !== -1) {
					let decimalPart = strNum.slice(decimalIndex + 1, decimalIndex + 3);
					return strNum.slice(0, decimalIndex + 1) + decimalPart;
				} else {
					return strNum;
				}
			},
			startPolling() {
				this.pollIntervalId = setInterval(this.checkRefund, 1000);
				setTimeout(() => {
					this.stopPolling();
				}, 10000); // 10秒后停止轮询
			},
			stopPolling() {
				if (this.pollIntervalId) {
					clearInterval(this.pollIntervalId);
					this.pollIntervalId = null;
				}
			},
			checkRefund() {
				this.$api.get(global.apiUrls.checkOrderRefund, {
					type: 1,
					refund_no: this.outRefundNo
				}).then(res => {
					// console.log(res);
					if (res.data.code == 1) {
						if (res.data.data.status == 1) {
							uni.hideLoading();
							this.$message.info('退款成功');
							this.getDetails();
							this.stopPolling();
						}
					} else {
						uni.hideLoading();
						this.$message.info(res.data.info);
					}
				}).catch(err => {
					uni.hideLoading();
				})
			},
			getRandomOfTwoFromArray(arr) {
			    const [value1, value2] = arr; // 假设arr至少包含两个元素
			    return [value1, value2][Math.floor(Math.random() * 2)]; // 直接从索引选择
			},
			clickRefund() {
				if (this.order_info.coupons_type == 15) {
					this.sequenceShow = true;
				} else {
					this.refundShow = true;
				}
			},
			// 抖音次卡退款
			cardRefund() {
				this.$api.post(global.apiUrls.dyRefund, {
					order_id: this.id
				}).then(res => {
					if (res.data.code == 1) {
						this.$message.info('提交成功');
						this.startPolling();
						setTimeout(() => {
							uni.showLoading({
								title: '查询退款状态中'
							})
						}, 800)
					} else {
						this.$message.info(res.data.info);
					}
				})
			},
			
			// 团购券退款
			confirmRefound() {
				let _this = this;
				let randomValue = (_this.getRandomOfTwoFromArray(_this.refoundList)).name;
				_this.refundShow = false;
				
				let skulist = [{
					quantity: _this.refound_num, // 退货数量 必填
					price: Number(_this.order_info.price) * 100, // 商品价格 必填
					skuId: String(_this.goods_info.out_id),
					skuType: 1, // 商品类型 必填
					goodsInfo: {
						goodsName: _this.goods_info.name, // 商品名称 必填
						goodsPhoto: _this.goods_info.image, // 商品图片链接 必填
						goodsId: String(_this.goods_info.out_id), // 商品ID 必填
						goodsType: 1
					}
				}]
				tt.applyRefund({
					refundInfo: {
						reason: [randomValue], // 退款理由 必填
					},
					outOrderNo: _this.id, // 外部订单号 必填
					skuList: skulist,
					callbackData: {}, // 透传数据 会被 JSON.stringfy 化 非必填
					// refundTotalAmount:1, // 老订单指定金额退款，新订单该参数无效
					success: res => {
						const {
							orderId,
							outRefundNo,
							refundId
						} = res;
						console.log('申请退款成功');
						console.log('orderId', orderId, 'outRefundNo', outRefundNo, 'refundId', refundId);
						_this.outRefundNo = outRefundNo;
						_this.$message.info('提交成功');
						_this.startPolling();
						setTimeout(() => {
							uni.showLoading({
								title: '查询退款状态中'
							})
						}, 800)
					},
					fail: res => {
						const {
							errNo,
							errMsg,
							errLogId
						} = res;
						console.log('申请失败', errNo, errMsg, errLogId);
						_this.$message.info('申请失败,请联系客服处理');
					},
				});
			},
			closeRefound() {
				this.refundShow = false;
				this.refound_name = this.refoundList[0].name;
			},
			// 选择子账号
			selectRefound(item) {
				this.refound_name = item;
			},
			predetermine() {
				if (this.order_info.coupons_type == 15) {
					this.$store.commit('saveSequence', true);
					this.$store.commit('saveSequenceNum', this.order_info.card_count);
				}
				uni.switchTab({
					url: '/pages/tabBar/index/index'
				})
			},
			valChange(e) {
				this.totalPrice = this.certificateInfo.price * e.value;
			},
			// 查看更多跳转
			seeMore(type) {
				// type 1车型  2门店  3须知跳转
				this.navigateToType = type;
				if (type == 1) {
					if (!uni.getStorageSync('city')) {
						uni.switchTab({
							url: '/pages/tabBar/index/index'
						})
					} else {
						let store = {
							citycode: this.storeInfo.city_id,
							lat: this.storeInfo.lat,
							lng: this.storeInfo.lng,
							store_id: this.storeInfo.id,
							store_name: this.storeInfo.name
						}
						uni.setStorageSync('store', store);
						uni.navigateTo({
							url: '/pages/index/modelsList/modelsList?door_to_door=0'
						})
					}
				} else if (type == 2) {
					if (!uni.getStorageSync('city')) {
						uni.switchTab({
							url: '/pages/tabBar/index/index'
						})
					} else {
						let store = {
							citycode: this.storeInfo.city_id,
							lat: this.storeInfo.lat,
							lng: this.storeInfo.lng,
							store_id: this.storeInfo.id,
							store_name: this.storeInfo.name
						}
						uni.setStorageSync('store', store);
						uni.navigateTo({
							url: '/pages/index/selectStore/selectStore'
						})
					}
				} else if (type == 3) {
					
				}
			},
			
			// 获取时间戳  oneTime
			getOneTime(day) {
				this.$api.get(global.apiUrls.oneTime, {
			
				}).then(res => {
					// console.log(res);
					if (res.data.code == 1) {
						let timeStamp = res.data.data.time * 1000;
						global.timeStamp = timeStamp;
						let toDay = utils.getNowTime(timeStamp);
						let week = utils.getWeekday(toDay);
						let twoDay = utils.getTwoDaysAfter(timeStamp, day);
						let twoWeek = utils.getWeekday(twoDay);
						this.timeData = {
							dayNum: day,
							is_today: toDay == utils.getNowTime() ? 1 : 0,
							toDay: toDay,
							toDay_month: (toDay.substring(5, 10)).replace('-', '月') + '日',
							toDay_time: toDay.substring(11, 16),
							week: week,
							twoDay: twoDay,
							twoDay_month: (twoDay.substring(5, 10)).replace('-', '月') + '日',
							twoDay_time: twoDay.substring(11, 16),
							twoWeek: twoWeek
						}
						global.timeData = this.timeData;
						// if (!global.timeData) {
						// 	this.timeData = {
						// 		dayNum: 1,
						// 		is_today: toDay == utils.getNowTime() ? 1 : 0,
						// 		toDay: toDay,
						// 		toDay_month: (toDay.substring(5, 10)).replace('-', '月') + '日',
						// 		toDay_time: toDay.substring(11, 16),
						// 		week: week,
						// 		twoDay: twoDay,
						// 		twoDay_month: (twoDay.substring(5, 10)).replace('-', '月') + '日',
						// 		twoDay_time: twoDay.substring(11, 16),
						// 		twoWeek: twoWeek
						// 	}
						// 	global.timeData = this.timeData;
						// } else {
						// 	this.timeData = global.timeData;
						// }
					} else {
						this.$message.info(res.data.info);
					}
				})
			},
			
			
			initCode() {
				let _this = this;
				uni.login({
					success: res => {
						// console.log(res);
						_this.code = res.code;
					},
					fail: err => {
						console.log(err);
					}
				})
			},
			// 打开地图
			openLocation() {
				let _this = this;
				uni.openLocation({
					latitude: _this.storeInfo.lat,
					longitude: _this.storeInfo.lng,
					name: _this.storeInfo.name,
					address: _this.storeInfo.address,
					success: function() {
						console.log('success');
					},
					fail: function(err) {
						console.log(err);
					}
				});
			},
			//拨打电话
			getgiveMobile() {
				let _this = this;
				uni.makePhoneCall({
					phoneNumber: _this.storeInfo.phone, //仅为示例
					success: res => {
						console.log(res);
					},
					fail: err => {
						console.log(err);
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.money_footer {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		width: 100%;
		height: 120rpx;
		position: fixed;
		bottom: calc(0rpx + var(--window-bottom));
		left: 0;
		background: #fff;
		z-index: 10;
		padding: 0 24rpx 0 24rpx;

		.footer_le {
			.footer_le_1 {
				display: flex;
				align-items: center;
				font-weight: 500;
				font-size: 30rpx;
				color: #FC5B03;

				.footer_le_1_1 {
					font-weight: bold;
					font-size: 40rpx;
					color: #FC5B03;
				}
				.footer_le_1_2 {
					margin-left: 16rpx;
					color: #999;
					text-decoration: line-through;
					font-size: 30rpx;
				}
				.footer_le_1_3 {
					font-size: 26rpx;
				}
			}

			.box_info {
				margin-left: 28rpx;
			}
		}

		.footer_ri {
			display: flex;
			align-items: center;

			.footer_ri_2 {
				margin-left: 24rpx;
				width: 232rpx;
				height: 80rpx;
				background: linear-gradient(to right, #FD5F17, #FA993E);
				border-radius: 80rpx;
				font-weight: bold;
				font-size: 34rpx;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: PingFang SC, PingFang SC;
			}
		}
		.footer_ri_1 {
			text-align: center;
			font-size: 24rpx;
			
			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}
	.swiper_info {
		width: 100%;
		height: 540rpx;
	}
	
	.content_bg {
		width: 100%;
		background: #fff;
		border-radius: 24rpx;
		box-shadow: 0px 8rpx 6rpx -6rpx #eee;
		padding: 0 32rpx 32rpx;
	}
	
	.content_title {
		font-size: 32rpx;
		font-weight: 600;
		color: #0D0D0D;
		padding-top: 32rpx;
	}
	
	.coupon_title {
		height: 112rpx;
		width: 100%;
	
		.coupon_title_le {
			width: 540rpx;
			height: 112rpx;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 2;
			background: url(https://speed.zhongchuxing.com/dyimages/301.png) no-repeat;
			background-size: 100% 100%;
			padding: 16rpx 0 0 32rpx;
	
			.coupon_price {
				.coupon_price_1 {
					font-size: 28rpx;
					color: #FD2B54;
				}
	
				.coupon_price_2 {
					font-size: 40rpx;
					font-weight: 700;
					color: #FD2B54;
				}
	
				.coupon_price_3 {
					font-size: 24rpx;
					color: #999999;
					margin-left: 16rpx;
					text-decoration: line-through;
				}
	
				.coupon_price_4 {
					font-size: 24rpx;
					color: #999999;
					margin-left: 16rpx;
				}
			}
	
			.coupon_tip {
				width: 240rpx;
				height: 32rpx;
				background: url(https://speed.zhongchuxing.com/dyimages/303.png) no-repeat;
				background-size: 100% 100%;
				position: relative;
				padding: 0 24rpx 0 0;
	
				.coupon_tip_1 {
					width: 25rpx;
					height: 34rpx;
					position: absolute;
					left: -6rpx;
					top: 0;
					z-index: 300;
				}
	
				.coupon_tip_2 {
					width: 136rpx;
					height: 32rpx;
					background: url(https://speed.zhongchuxing.com/dyimages/304.png) no-repeat;
					background-size: 100% 100%;
					font-size: 20rpx;
					color: #fff;
				}
	
				.coupon_tip_3 {
					font-size: 20rpx;
					font-weight: 500;
					color: #FF1E4A;
					white-space: nowrap;
				}
			}
		}
	
		.coupon_title_ri {
			text-align: right;
			width: 396rpx;
			height: 112rpx;
			position: absolute;
			right: 0;
			top: 0;
			z-index: 1;
			background: url(https://speed.zhongchuxing.com/dyimages/302.png) no-repeat;
			background-size: 100% 100%;
			padding: 26rpx 32rpx 0 0;
	
			image {
				width: 192rpx;
				height: 60rpx;
			}
		}
	}
	
	.coupon_name {
		padding: 24rpx 0 0 0;
		font-size: 32rpx;
		font-weight: 600;
	}
	
	.coupon_label {
		overflow: hidden;
		margin-top: 16rpx;
	
		.label_item {
			float: left;
			margin-right: 16rpx;
			margin-bottom: 16rpx;
			border-radius: 8rpx;
			background: #FCEFE2;
			color: #D97511;
			font-size: 24rpx;
			padding: 4rpx 10rpx;
		}
	}
	
	.tips_item {
		margin-bottom: 24rpx;
	
		.tips_item_1 {
			color: #666666;
			font-size: 24rpx;
			margin-right: 24rpx;
		}
	
		.tips_item_2 {
			font-size: 24rpx;
			color: #1A1A1A;
			flex: 1;
		}
	}
	
	.coupon_date {
		width: 100%;
		height: 66rpx;
		background: #FCEFE2;
		font-size: 24rpx;
		color: #D97511;
		padding: 0 16rpx;
		border-radius: 8rpx;
	
		image {
			width: 28rpx;
			height: 28rpx;
			margin-right: 10rpx;
		}
	}
	
	.city_list {
		width: 100%;
		white-space: nowrap;
		margin: 24rpx 0;
	
		.city_item {
			display: inline-block;
			margin-right: 16rpx;
			background: #f2f2f2;
			font-size: 28rpx;
			padding: 4rpx 16rpx;
			border-radius: 8rpx;
			color: #737373;
	
			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 8rpx;
				transform: translateY(5rpx);
			}
		}
	
		.city_item_active {
			background: #F99844 !important;
			color: #fff !important;
		}
	}
	.ri_item {
		margin-top: 24rpx;
		background: #FFFFFF;
		box-shadow: 0px 4rpx 20rpx 0px rgba(0, 63, 136, 0.05);
		border-radius: 16rpx;
		border: 2rpx solid #ECEEF4;
		padding: 20rpx 24rpx 32rpx 20rpx;
	
		.vehicle_information {
			display: flex;
			justify-content: space-between;
	
			.car_name {
				width: calc(100% - 264rpx);
	
				.car_name_1 {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 30rpx;
					color: #111111;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}
	
				.car_name_2 {
					margin-top: 12px;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 22rpx;
					color: #666666;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
	
					.car_name_2_1 {
						color: #CCCCCC;
					}
				}
				.vehicle_label {
					display: flex;
					align-items: center;
					margin-top: 32rpx;
					
					.label_le {
						flex: 1;
						display: flex;
						align-items: center;
					
						.label_1 {
							width: 108rpx;
							height: 30rpx;
						}
					
						.label_2 {
							padding: 2rpx 6rpx;
							background: rgba(26, 102, 250, 0.05);
							border-radius: 4rpx;
							font-weight: 500;
							font-size: 22rpx;
							color: #506898;
							margin-left: 12rpx;
						}
					
						.label_3 {
							padding: 2rpx 8rpx;
							background: #1677FF;
							color: #fff;
							font-size: 22rpx;
							border-radius: 5rpx;
					
							image {
								width: 22rpx;
								height: 22rpx;
								margin-right: 10rpx;
							}
						}
					}
					
					.label_ri {
						font-size: 22rpx;
						color: #999999;
					}
					
				}
			}
	
			.car_img {
				width: 240rpx;
				height: 196rpx;
				position: relative;
	
				.car_icon {
					width: 100rpx;
					height: 25rpx;
					position: absolute;
					top: 8rpx;
					left: 8rpx;
				}
			}
	
		}
	
		
	
		.car_btm {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 20rpx;
	
			.btm_1 {
				.car_total_price {
					font-weight: 500;
					font-size: 22rpx;
					color: #999999;
				}
	
				.car_price {
					margin-top: 16rpx;
	
					.car_price_1 {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 22rpx;
						color: #999999;
					}
	
					.car_price_2 {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 22rpx;
						color: #EF2E28;
						line-height: 34rpx;
					}
	
					.car_price_3 {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 36rpx;
						color: #EF2E28;
						line-height: 32rpx;
					}
	
					.car_price_4 {
						padding: 2rpx 6rpx;
						background: rgba(252, 91, 3, 0.07);
						border-radius: 4rpx;
						font-weight: 500;
						font-size: 22rpx;
						color: #FC5B03;
						margin-left: 12rpx;
					}
				}
			}
	
			.btm_2 {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 112rpx;
				height: 56rpx;
				background: #FC5B03;
				border-radius: 88rpx;
				font-weight: 500;
				font-size: 26rpx;
				color: #FFFFFF;
			}
	
			.btm_3 {
				display: flex;
				align-items: center;
	
				.btm_3_1 {
					font-weight: 500;
					font-size: 22rpx;
					color: #111111;
				}
	
				.btm_3_2 {
					font-weight: 500;
					font-size: 22rpx;
					color: #999999;
				}
	
				.btm_3_3 {
					width: 24rpx;
					height: 24rpx;
				}
			}
		}
	}
	
	.car_more {
		background: #FFF1E6;
		border-radius: 8rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #D97511;
		padding: 20rpx 24rpx;
		margin-top: 24rpx;
	}
	
	.store_info {
		width: 100%;
		height: 288rpx;
		background: url(https://speed.zhongchuxing.com/dyimages/308.png) no-repeat;
		background-size: 100% 100%;
		margin-top: 24rpx;
		padding: 32rpx 32rpx 0 24rpx;
	
		.store_info_le {
			.store_info_title {
				font-size: 30rpx;
				font-weight: 600;
	
				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 6rpx;
				}
			}
	
			.store_info_address {
				padding-left: 40rpx;
				width: 400rpx;
				font-size: 28rpx;
				color: #999999;
				margin-top: 16rpx;
				display: -webkit-box;
				/* 必须结合 display: -webkit-box; 用于多行文本省略 */
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
				text-overflow: ellipsis;
			}
	
			.store_more {
				width: 212rpx;
				height: 64rpx;
				margin-top: 16rpx;
				margin-left: 40rpx;
				background-color: #F9E2CB;
				color: #D97511;
				padding: 0 16rpx;
				font-size: 24rpx;
				border-radius: 8rpx;
			}
		}
	
		.store_info_ri {
			.store_ri_item {
				text-align: center;
				font-size: 28rpx;
				font-weight: 500;
				margin-top: 10rpx;
				color: #D97511;
				margin-left: 26rpx;
	
				image {
					width: 64rpx;
					height: 64rpx;
				}
			}
		}
	}
	
	.describe {
		font-size: 28rpx;
		color: #4D4D4D;
		margin-top: 24rpx;
	}
	.login_info {
		padding: 32rpx;
		.login_title {
			font-size: 32rpx;
			font-weight: 500;
			image {
				width: 56rpx;
				height: 56rpx;
			}
		}
		.login_tip {
			margin-top: 48rpx;
			margin-left: 32rpx;
			font-size: 64rpx;
			font-weight: 500;
		}
		.passwordLogin_fd2_2_c1 {
			font-weight: 500;
			font-size: 40rpx;
			color: #FFFFFF;
		}
		
		.passwordLogin_fd2_2 {
			width: 686rpx;
			height: 92rpx;
			background: linear-gradient(to right, #FD5F17, #FA993E);
			border-radius: 46rpx;
			margin-top: 112rpx;
		}
		.passwordLogin_flex_3 {
			background: #fff;
			width: 100%;
			margin-top: 300rpx;
		}
		
		.passwordLogin_fd3_2 {
			font-weight: 500;
			font-size: 24rpx;
			color: #FC5B03;
			text-decoration: underline;
			margin: 0 5rpx;
		}
		
		.passwordLogin_fd3_1 {
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(153, 153, 153, 1);
		}
		
		.passwordLogin_noCheckfd3_0_c1_c0 {
			width: 32rpx;
			height: 32rpx;
			margin: 0rpx 16rpx 0rpx 0rpx;
			transform: translateY(-3rpx);
		}
		
		.passwordLogin_checkfd3_0_c0_c0 {
			width: 32rpx;
			height: 32rpx;
			margin: 0rpx 16rpx 0rpx 0rpx;
			transform: translateY(-3rpx);
		}
		
		::v-deep .passwordLogin_fd3_0 {
			// margin: 0rpx 16rpx 0rpx 0rpx;
			// transform: translateY(-3rpx);
		}
	}
	
	.intro_info {
		margin: 100rpx 28rpx 28rpx;

		.intro_title {
			font-size: 40rpx;
			font-weight: 600;
		}

		.intro_date {
			font-size: 32rpx;
			color: #FC5B03;
			margin-top: 24rpx;
		}

		.intro_img {
			margin-top: 24rpx;

			image {
				width: 100%;
				height: auto;
				border-radius: 12rpx;
			}
		}

		.intro_content {
			margin-top: 24rpx;
			font-size: 28rpx;
			line-height: 32rpx;
		}

		.car_names {
			margin-top: 24rpx;
		}
	}

	.footer_le_2 {
		position: fixed;
		right: 32rpx;
		bottom: 150rpx;

		image {
			width: 48rpx;
			height: 48rpx;
			transform: translateY(5rpx);
		}

		.footer_le_2_1 {
			font-weight: 500;
			font-size: 26rpx;
			color: #FC5B03;
			transform: translateY(-5rpx);
		}
	}

	.refund_pop {
		padding: 0 30rpx 30rpx;

		.refund_title {
			font-size: 34rpx;
			text-align: center;
			padding: 28rpx 0;
		}

		.refund_view {
			font-size: 28rpx;
		}

		.refund_money {
			font-weight: 600;
			margin: 16rpx 0 24rpx;
		}

		.refund_type {
			padding: 0 24rpx;
			margin: 24rpx 0;

			.refund_type_item {
				background: #f6f6f6;
				width: 300rpx;
				height: 78rpx;
				border-radius: 12rpx;
			}

			.active_type_item {
				background: #fff;
				color: #1A66FA;
				border: 1px solid #1A66FA;
			}
		}

		.refund_input {
			border: 1px solid #eee;
			margin: 24rpx 0;
			padding: 10rpx 24rpx;
			font-size: 28rpx;
			border-radius: 8rpx;
		}

		.refund_custom {
			margin: 24rpx 0;
			font-size: 26rpx;

			.refund_custom_price {
				color: #FC5B03;
			}
		}

		.refund_tips {
			font-size: 24rpx;
			color: #FC5B03;
			margin-top: 24rpx;
		}

		.refund_btn {
			padding: 32rpx 0 0;
			border-top: 1px solid #eee;
			margin: 24rpx 0;

			.refund_btn_1 {
				background: #f6f6f6;
				width: 300rpx;
				height: 78rpx;
				border-radius: 12rpx;
			}

			.refund_btn_2 {
				color: #fff;
				background: #FC5B03;
				width: 300rpx;
				height: 78rpx;
				border-radius: 12rpx;
			}
		}
	}
	.customer_view {
		width: 100%;
		position: fixed;
		z-index: 99;
		height: 78rpx;
		top: 0;
		right: 0;
		// background: #FC5B03;
		background: linear-gradient(to right, #FC5B03, #FEB16A);
		color: #fff;
		padding: 0 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		image {
			width: 40rpx;
			height: 40rpx;
		}
		.customer_btn_text {
			font-size: 32rpx;
			margin-left: 16rpx;
		}
	}
	
	.account_pop {
		.account_title {
			text-align: center;
			font-size: 32rpx;
			font-weight: 600;
			padding: 28rpx 0;
		}
	
		.account_list {
			padding: 0 28rpx;
			height: 360rpx;
	
			.account_item {
				padding: 16rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
	
				.account_item_text {
					font-size: 30rpx;
					font-weight: 500;
				}
	
				.short_name {
					font-size: 28rpx;
					color: #999;
					margin-left: 5rpx;
				}
	
				.account_item_icon {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
		.refound_view {
			margin: 16rpx 28rpx;
		}
	
		.account_btn {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 24rpx 28rpx 48rpx;
	
			.account_btn_1 {
				width: 300rpx;
				height: 80rpx;
				border-radius: 12rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #eee;
				font-size: 30rpx;
			}
	
			.account_btn_2 {
				width: 300rpx;
				height: 80rpx;
				border-radius: 12rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #FC5B03;
				color: #fff;
				font-size: 30rpx;
			}
		}
	}
</style>